<template>
  <div>
    <Info
      :information="records"
      @search="search"
      :findRecord="findRecord"
      @show="show"
    />
    <OutCome :item="item" :isShow="isShow" @close="close" />
  </div>
</template>

<script>
import Info from './components/information.vue'
import OutCome from './components/outcome.vue'
export default {
  components: {
    Info,
    OutCome,
  },
  data() {
    return {
      isShow: false,
      findRecord: [],
      records: [
        {
          date: '2022-01-01',
          doctor: '张三',
          diagnosis: '感冒',
          prescription: '感冒药',
        },
        {
          date: '2022-02-01',
          doctor: '李四',
          diagnosis: '头疼',
          prescription: '止疼药',
        },
        {
          date: '2022-03-01',
          doctor: '王五',
          diagnosis: '腰痛',
          prescription: '止痛贴',
        },
      ],
      item: {
        date: '',
        doctor: '',
        diagnosis: '',
        prescription: '',
      },
    }
  },
  methods: {
    show(val) {
      this.isShow = true
      // console.log(val)
      const res = this.findRecord.filter((item, index) => val === index)
      // console.log(res)
      this.item.date = res[0].date
      this.item.doctor = res[0].doctor
      this.item.diagnosis = res[0].diagnosis
      this.item.prescription = res[0].prescription
    },
    close() {
      this.isShow = false
    },
    search(val) {
      this.findRecord = this.records.filter((item) => {
        return (
          item.doctor.includes(val) ||
          item.diagnosis.includes(val) ||
          item.prescription.includes(val)
        )
      })
      // console.log(this.findRecord)
    },
  },
}
</script>

<style></style>
